<template>
  <view>
    <!-- 请假列表和审批 -->
    <view class="btn">
      <button  @click="addDuty" size="mini" >添加请假</button>
      <button :class="{ 'active': isActive===1 }" @click="search(nickName)" size="mini" >请假记录</button>
      <button :class="{ 'active': isActive===2 }" @click="search(userName)" size="mini" v-if="checkRole(['duty','admin'])">我的审批</button>
    </view>  
    <view class="card"  v-for="item in dutyList" :key="item.id">
    	<uni-card :title="item.offdutyDate"  :extra="item.offdutyStat===1? '审批通过' : '未审批'" >	
        <view class="uni-body">请假人：{{item.nickName}}</view>
        <view class="uni-body">请假时间：{{item.offdutyDate}}</view>
        <view class="uni-body">请假事由：{{item.remark}}</view>
        <view class="uni-body" v-if="item.personPermit">审批人：{{item.personPermit}}</view>
        <view class="allow">
          <button  @click="edit(item.id)" size="mini" 
           v-if="item.offdutyStat !== 1"    
             v-show="item.userName===userName||userName==='admin'"
          >修改</button>
          <button type="primary" @click="allow(item.id)" size="mini"  v-show="item.offdutyStat !== 1"
            v-if="checkRole(['duty','admin'])"
          >审批请假</button>
        </view>   
      </uni-card> 
    </view>
    <u-loadmore  v-if="queryParams.pageNum*queryParams.pageSize>totalPage" loadmoreText="到底了~" />
  </view>
</template>

<script>
  import {
    listDuty,
    getDuty,
    delDuty,
    addDuty,
    updateDuty,
  } from "@/api/system/duty";
  import { checkPermi, checkRole } from "@/utils/permission"; 
  export default {
    data() {
      return {
        isActive: false ,// 默认按钮未被选中
        dutyList:[],
        queryParams: {
        	pageNum: 1,
        	pageSize: 10,
        },
        totalPage: null, // 总共有多少页数据
        isLoadingMore: false, // 标记正在加载更多数据
        userName:this.$store.state.user.name,
        nickName : this.$store.state.user.nickname
      };
    },
    onReady(){
      this.search(this.nickName)
    },
    methods:{
      checkRole,
     addDuty(){
       uni.navigateTo({
         url:'../dutyAdd/dutyAdd'
       })
     },
     edit(id){
       uni.navigateTo({
         url:'../dutyEdit/dutyEdit?id='+id
       })
     },
     async getDutyList(){           
            // console.log(this.queryParams)
           const res= await listDuty(this.queryParams)
          // console.log(res)
          if(this.queryParams.pageNum === 1){
               this.totalPage = res.total; // 设置总页数
               this.dutyList = []; // 清空之前的数据
                   }
           const newData = res.rows || [];
           this.dutyList = [...this.dutyList, ...newData]; // 将新数据添加到已有数据的尾部
           this.isLoadingMore = false; // 结束加载状态
     },
     // 判断是不是中文
    isChinese(str) {
         var reg = /^[\u4e00-\u9fa5]+$/; // Unicode范围内的汉字编码
         return reg.test(str);
     },
     search(name){
       // console.log(name)
       // console.log(this.isChinese(name))
       this.queryParams.pageNum=1
       if(this.isChinese(name)){
         // 中文查询请假人是参数
         // console.log('查请假人')
         this.isActive=1
          if (this.userName !== 'admin') {
           // console.log('不是admin账号');
           this.queryParams.nickName=this.nickName
           this.queryParams.personIncharge=''
         }  
       }
       else{
         // 英文查审批人
          // console.log('查审批人')
          
         this.isActive=2
         if (this.userName !== 'admin') {
          this.queryParams.nickName=''
         this.queryParams.personIncharge=this.userName
         }
       }
       this.getDutyList()
     },
     allow(id){
       // console.log(id)
       uni.showModal({
       	title: '提示',
       	content: '是否通过该员工的请假申请？',
       	success: async (res) =>{
       		if (res.confirm) {
            await updateDuty({id:id,offdutyStat:1,personPermit:this.nickName}),
            uni.showToast({
            	title: '已同意',
            	duration: 2000
            });
            setTimeout(() => {
            	this.getDutyList()
            },200)
       			// console.log('用户点击确定');
       		} else if (res.cancel) {
       			// console.log('用户点击取消');
       		}
       	}
       });
     },
     onReachBottom() {
        // console.log(this.queryParams.pageNum*this.queryParams.pageSize)
        // console.log(this.totalPage)
       // console.log('触发上拉加载'+this.queryParams.pageNum*this.queryParams.pageSize < this.totalPage)
       if(!this.isLoadingMore && this.queryParams.pageNum*this.queryParams.pageSize < this.totalPage){
           this.isLoadingMore = true; // 开始加载状态       
           setTimeout(()=>{
             this.queryParams.pageNum++; // 每次加载完成后自增页码
             this.getDutyList(); // 再次请求数据
           },500); // 模拟异步操作需要等待一段时间才能返回数据
           }
         }
    }
  }
</script>

<style lang="less">
.btn{
  display: flex;
  margin: 30rpx;
  justify-content: space-around;
  // justify-content: center;
  /* 选中状态 */
   .active {
    background-color: #aaff7f; /* 按钮选中时的背景色 */
  }
}
.allow{
  // border: 1px red solid;
  width: 100%;
 text-align: right;
 button{
   margin-right: 10rpx;
 }
 
}
</style>
